<template>
  <div id="app3">
    <header class="header">
      <div>
        <div class="title">
          <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="fanhui_btn" />
          <div>目标考核</div>
          <div class="btn-add">
            <div class="datatime">
              <img src="../../assets/images/99.png" class="lefts" @click="less" alt />
              <span class="datatime-intro">{{dataNum}}</span>
              <img src="../../assets/images/99.png" class="rights" @click="add" alt />
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="tit">{{title.mc}}</div>
    <table frame="hsides" v-if="isFuck">
      <tr>
        <td colspan="3">
          <div class="box-tit">
            <div class="box-flex">
              <div>
                <img src="../../assets/images/tabbar_user.png" class="people" alt />
              </div>
              <div>{{title.userName}}</div>
            </div>
            <div class="box-flex" v-if="title.zhiwu!=''">
              <div>
                <img src="../../assets/images/zw.png" class="people" alt />
              </div>
              <div>{{title.zhiwu}}</div>
            </div>
            <div class="box-flex">
              <div>
                <img src="../../assets/images/zyry.png" class="people" alt />
              </div>
              <div>{{title.type}}</div>
            </div>
          </div>
        </td>
      </tr>
      <tr v-for="(item,index) in list" :key="index">
        <td>
          <div class="box">
            <div>
              <img src="../../assets/images/files.png" class="light" alt />
            </div>
          </div>
        </td>
        <td class="content">{{item.content}}</td>
        <td>
          <img src="../../assets/images/jg.gif" v-if="item.light==1" class="light" alt />
          <img src="../../assets/images/jsd.gif" v-if="item.light==3" class="light" alt />
          <img src="../../assets/images/lg.png" v-if="item.light==2" class="lights" alt />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "",
      dataNum: 2020,
      userId: "",
      year: "",
      list: [],
      isFuck:false
    };
  },
  created() {
    this.userId = this.$route.query.id;
    this.year = this.$route.query.year;
    this.listArry();
  },
  methods: {
    fanhui_btn() {
      this.$router.back();
    },
    less() {
      //  this.dataNum--;
    },
    add() {
      // this.dataNum++;
    },
    listArry() {
        try {
        plus.nativeUI.showWaiting("正在加载...");
      } catch (e) {
        console.log("plus问题");
      }
      this.axios
        .get(
          this.$global_msg.Url.host +
            "/performancereport/menmberDec?userId=" +
            this.userId +
            "&year=" +
            this.year
        )
        .then((res) => {
           try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
          this.isFuck = true;
          this.title = res.data.rows;
          this.list = res.data.rows.list;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.header {
  height: 1.8519rem;
  background: #007aff;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 20;
  font-size: 0.388888rem;
}

.title {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.title > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}

.img_zuo {
  width: 0.2593rem;
  height: 0.463rem;
}
.lefts {
  width: 0.26rem;
  height: 0.4rem;
}
.rights {
  width: 0.26rem;
  height: 0.4rem;
  transform: rotate(-180deg);
}
.datatime {
  width: 2rem;
  display: flex;
  /* padding: 0 0.266667rem; */
}
.datatime-intro {
  padding: 0 0.213333rem;
  font-size: 0.32rem;
}
.btn-add {
  position: absolute;
  right: 0;
  width: auto !important;
  height: 80%;
  bottom: 0;
  display: flex;
  align-items: center;
}
.btn-add {
  font-size: 0.388888rem !important;
}
.tit {
  margin-top: 2.2rem;
  text-align: center;
  font-size: 0.4rem;
  color: #000000;
}
table {
  width: 100%;
  color: #666666;
  border-collapse: collapse;
  margin-top: 0.266667rem;
  font-size: 0.4rem;
}
td {
  border: 1Px solid #999999;
  padding: 0.4rem 0.2rem;
}
tr:last-child td {
  border-bottom: none;
}
tr td {
  border-right: none;
}
.light {
  width: 0.653333rem;
  height: auto;
}
.lights {
  width: 0.6rem;
  height: auto;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.people {
  width: 0.4rem;
  height: auto;
  margin-right: 0.053333rem;
}
.box-tit {
  display: flex;
  color: #000000;
  font-size: 0.4rem;
}
.box-flex {
  display: flex;
  align-items: center;
}
.box-flex:nth-child(2) {
  margin-left: 0.266667rem;
}
.box-flex:nth-child(3) {
  margin-left: 0.266667rem;
}
.content{
  text-align: left;
}
</style>
